import React, {Component} from 'react';
import {
    Dimensions,
    Image,
    PixelRatio,
    StyleSheet,
    View,
    ScrollView,
    TouchableOpacity,
    FlatList,
    Text
} from 'react-native';
const {width,height} = Dimensions.get('window');
import GameMenuView               from '../../views/GameMenuView';
import SpacingView                from '../../views/SpacingView';
import BaseNavigationBar          from '../../views/BaseNavigationBar';
import api                        from "../../utils/api";
import Swiper                     from 'react-native-swiper';
import * as BaseAPI from "../../utils/BaseAPI";
import StorageUtil from "../../utils/StorageUtil";


export default class GameScreen extends Component {
    static navigationOptions = {
        tabBarLabel: '游戏',
        tabBarIcon: ({focused, tintColor}) => {
            if (focused) {
                return (
                    <Image style={styles.tabBarIcon} source={require('../../../images/tab/tab_game_selected.png')}/>
                );
            }
            return (
                <Image style={styles.tabBarIcon} source={require('../../../images/tab/tab_game_normal.png')}/>
            );
        },
    };

    constructor(props) {
        super(props);
        this.state = {
            gamesList:[],
            welfares:[],
            noData:'',
            // dataSource : new ListView.DataSource(
            //     { rowHasChanged: (r1, r2) => r1.uuid !== r2.uuid }),
        };
    }

    componentWillMount() {
        StorageUtil.get('token',(error,object)=>{
            if (!error && object != null)
            {
                this.getGamesData(object.token);
            }
        });
    }

    getGamesData(token){
        // this.setState({showProgress:true});

        console.log('游戏URL'+ BaseAPI.GetGamesDataUrl+token);

        fetch(BaseAPI.GetGamesDataUrl+token, {
            method:'GET',
        }).then((res)=>res.json())
            .then((json)=>{

                console.log('游戏列表成功'+ json + JSON.stringify(json));
                this.setState({gamesList:json.list});


            })
            .catch((e)=>{

                console.log('游戏数据失败'+ e + JSON.stringify(e));

                // this.setState({showProgress:false});
                // // // 网络错误
                // this.refs.toast.show('网络请求出错：' + e);
            })
    }

    onPress(banner) {
        this.props.navigation.navigate("BannerDetail")
    }

    goGameDetail(item){
        this.props.navigation.navigate("GameDetail",{gameItem:item});
    }

    renderItem=({ item })=> {
        return (
            <TouchableOpacity activeOpacity={1} onPress={() => this.goGameDetail(item)}>
                <View style={styles.itemViewStyle}>
                    <Image source={{uri:item.icon}} style={styles.imageStyle} />
                    <Text style={styles.nameStyle} numberOfLines={2}>{item.name}</Text>
                    <Text style={styles.numberStyle}>{item.online}人在玩</Text>
                </View>
            </TouchableOpacity>
        )
    }

    renderHeaderView(){
        var bannerList = [
            'http://img1.3lian.com/2015/w7/98/d/22.jpg',
            'http://img1.3lian.com/2015/w7/98/d/22.jpg',
            'http://img1.3lian.com/2015/w7/98/d/22.jpg'
        ];
       return (
           <View>
               <Swiper
                   horizontal={true}
                   height={200}
                   loop={true}
                   autoplay={true}
                   paginationStyle={{bottom:10}}
                   dot={<View style={styles.customDot} />}
                   activeDot={<View style={styles.customActiveDot} />}

               >
                   {
                       bannerList.map((banner,i) => {
                           return (
                               <TouchableOpacity key={i} activeOpacity={1}
                                                 onPress={() => this.onPress(banner)}>
                                   <Image
                                       style={styles.bannerImage}
                                       source={{uri:banner}}
                                   />
                               </TouchableOpacity>
                           )
                       })
                   }
               </Swiper>

               <Text style={styles.titleStyle}>小游娱乐</Text>
           </View>
       )
    }

    renderSpecial(){
        return (
            <View style={styles.bgViewStyle}>
                <FlatList
                    data={this.state.gamesList}
                    keyExtractor={(item, index) => index}
                    ListHeaderComponent={this.renderHeaderView}
                    renderItem={this.renderItem}
                    numColumns={3}
                />
            </View>
        )
    }

    render() {
        // var bannerList = [
        //     'http://img1.3lian.com/2015/w7/98/d/22.jpg',
        //     'http://img1.3lian.com/2015/w7/98/d/22.jpg',
        //     'http://img1.3lian.com/2015/w7/98/d/22.jpg'
        // ];
        return (
            <View style={styles.container}>
                <BaseNavigationBar
                    title={'游戏'}
                />

                {this.renderSpecial()}

                {/*<FlatList*/}
                    {/*data={this.state.gamesList}*/}
                    {/*renderItem={this.renderCell}*/}

                    {/*keyExtractor={this.keyExtractor}*/}
                    {/*// onRefresh={this.requestData}*/}
                    {/*refreshing={this.state.refreshing}*/}

                    {/*// ListHeaderComponent={this.renderHeader}*/}
                {/*/>*/}

                {/*<ScrollView>*/}
                    {/*<Swiper*/}
                        {/*horizontal={true}*/}
                        {/*height={200}*/}
                        {/*loop={true}*/}
                        {/*autoplay={true}*/}
                        {/*paginationStyle={{bottom:10}}*/}
                        {/*dot={<View style={styles.customDot} />}*/}
                        {/*activeDot={<View style={styles.customActiveDot} />}*/}

                    {/*>*/}
                        {/*{*/}
                            {/*bannerList.map((banner,i) => {*/}
                                {/*return (*/}
                                    {/*<TouchableOpacity key={i} activeOpacity={1}*/}
                                                      {/*onPress={() => this.onPress(banner)}>*/}
                                        {/*<Image*/}
                                            {/*style={styles.bannerImage}*/}
                                            {/*source={{url:banner}}*/}
                                        {/*/>*/}
                                    {/*</TouchableOpacity>*/}
                                {/*)*/}
                            {/*})*/}
                        {/*}*/}
                    {/*</Swiper>*/}

                {/*</ScrollView>*/}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        // alignItems: 'center',
        backgroundColor: '#efefef',
    },
    bgViewStyle: {
        width: width,
        height:height,
        backgroundColor:'white'
    },
    itemViewStyle:{
        width:(width-70)/3,
        marginLeft:20,
        justifyContent:'center',
        alignItems:'center',
        borderRadius:5,
        borderWidth:.5,
        borderColor:'red',
        shadowColor:'blue'
    },
    bannerImage: {
        height:200,
        width:width,
    },
    imageStyle:{
        width:(width-70)/3-10,
        height:(width-70)/3-10
    },
    nameStyle:{
        fontSize:13,
        color:'#333333',
        marginTop:6,
        marginBottom:6,
    },
    numberStyle:{
        fontSize:12,
        color:'#ff4114',
        marginBottom:6,
    },
    tabBarIcon: {
        width: 24,
        height: 24,
    },
    titleStyle:{
        fontSize:14,
        color:'#333333',
        marginLeft:0.56*24,
        marginTop:0.56*30,
        marginBottom:0.56*20
    },
    // TODO: banner setting
    customDot: {
        backgroundColor: '#ccc',
        height:6,
        width: 6,
        marginLeft: 2,
        marginRight: 2,
        marginTop:200,
        borderRadius:3,
    },
    customActiveDot: {
        backgroundColor:'red',
        height: 6,
        width: 6,
        marginLeft: 2,
        marginRight: 2,
        marginTop:200,
        borderRadius: 3,
    },
});
